<template>
	<div class="shop-container">
		<div class="shop_section">
			<h3>商铺信息</h3>
			<el-form :model="shopForm" ref="shopForm" class="demo-dynamic" :rules="rules" label-width="150px">
				<el-form-item label="标题" prop="title">
					<el-input v-model="shopForm.title" />
				</el-form-item>
				<el-form-item label="商铺logo" prop="logoUrl">
					<el-upload :action="uploadPath" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
					 class="avatar-uploader">
						<img v-if="shoplist.logoUrl" :src="shopForm.logoUrl" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon" />
					</el-upload>
				</el-form-item>
				<el-form-item label="描述" prop="description">
					<el-input v-model="shopForm.description" />
				</el-form-item>
				<el-form-item label="地址" prop="address">
					<el-input v-model="shopForm.address" />
				</el-form-item>
			</el-form>
			<div class="op-container">
				<el-button type="primary" @click="save('shopForm')">保存更改</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getShop,
		updateShop,
		uploadPath
	} from "../api.js"
	export default {
		data() {
			return {
				shoplist: [],
				// 表单
				uploadPath,
				shopForm: {
					title: undefined,
					logoUrl: undefined,
					description: undefined,
					address: undefined,
					showType: 1
				},
				// 验证
				rules: {
					address: [{
						required: true,
						message: "商铺地址不能为空",
						trigger: "blur"
					}],
					title: [{
						required: true,
						message: "商铺标题不能为空",
						trigger: "blur"
					}],
					description: [{
						required: true,
						message: "商铺描述不能为空",
						trigger: "blur"
					}]
				},
			}
		},
		methods: {
			getData() {
				getShop().then((res) => {
					console.log(res);
					this.shoplist = res.data.data;
					this.shopForm = Object.assign({}, this.shoplist);
				})
			},
			handleAvatarSuccess(res, file) {
				this.shoplist.logoUrl = URL.createObjectURL(file.raw);
				this.shopForm.logoUrl = URL.createObjectURL(file.raw);
			},
			// 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
			beforeAvatarUpload(file) {
				const isJPG = file.type === "image/jpeg";
				const isLt2M = file.size / 1024 / 1024 < 2;
				
				if (!isJPG) {
					this.$message.error("上传头像图片只能是 JPG 格式!");
				}
				if (!isLt2M) {
					this.$message.error("上传头像图片大小不能超过 2MB!");
				}
				return isJPG && isLt2M;
			},
			// 更改商铺信息
			save(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						updateShop(this.shopForm)
							.then((res) => {
								console.log(res)
								this.$message.success("更改成功");
							})
							.catch(() => {
								this.$message.error("更改失败");
							});
					} else {
						this.$message.error("请完善表单");
					}
				});
			},
		},
		created() {
			this.getData()
		}
	}
</script>

<style>
	.shop-container {
		padding: 20px;

	}

	.shop_section {
		padding: 40px 20px;
		border: 1px solid #EBEEF5;
		background-color: #FFF;
		color: #303133;
		transition: .3s;
		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
		line-height: 178px !important;
	}

	.avatar {
		width: 145px;
		height: 145px;
		display: block;
	}

	.el-form-item__content {
		width: 87%;
	}
</style>
